﻿<UserControl x:Class="ExampleControl.Controls.ColourPicker.ColorPicker"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
            xmlns:ColourPicker="clr-namespace:ExampleControl.Controls.ColourPicker"
            Width="Auto" Height="Auto" MouseLeftButtonUp="TurnEverythingOff">

    <Border BorderThickness="1,1,1,1" CornerRadius="8,8,8,8" x:Name="RootControl" Padding="1,1,1,1" Background="#FF000000">
        <Grid x:Name="LayoutRoot" Margin="4,4,4,4">
            <Grid.RowDefinitions>
                <RowDefinition x:Name="colorRow" Height="Auto" MinHeight="133" />
                <RowDefinition Height="Auto" MinHeight="0"/>
                <RowDefinition Height="Auto" MinHeight="28"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="colorColumn" Width="Auto" MinWidth="120"/>
                <ColumnDefinition x:Name="rightColumn" Width="Auto" MinWidth="90"/>
            </Grid.ColumnDefinitions>
            <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="1" Width="Auto" Grid.Row="0" Orientation="Vertical" x:Name="LargePanel">
                <StackPanel>
                	<StackPanel Orientation="Horizontal" >
                		<TextBlock Text="R:" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="10"/>
                		<TextBlock Text="255" TextWrapping="Wrap" Foreground="#FFFFFFFF" Margin="4,0,0,0" x:Name="RedText" FontSize="10" Width="20"/>
                	</StackPanel>
                	<StackPanel Orientation="Horizontal" >
                		<TextBlock Text="G:" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="10"/>
                		<TextBlock Text="255" TextWrapping="Wrap" Foreground="#FFFFFFFF" Margin="4,0,0,0" x:Name="GreenText" FontSize="10" Width="20"/>
                	</StackPanel>
                	<StackPanel Orientation="Horizontal" >
                		<TextBlock Text="B:" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="10"/>
                		<TextBlock Text="255" TextWrapping="Wrap" Foreground="#FFFFFFFF" Margin="4,0,0,0" x:Name="BlueText" FontSize="10" Width="20"/>
                	</StackPanel>
                </StackPanel>
                <StackPanel>
                	<TextBlock Height="Auto" Width="Auto" Text="Copy RGB:" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="10" Margin="2,2,2,2"/>
                	<ColourPicker:ClickTextBox x:Name="CopyColorText" Text="255,255,255" Foreground="#FFFFFFFF" SelectionBackground="#FF377887" Background="#FF333333" FontSize="10" HorizontalAlignment="Left" Width="75"/>
                </StackPanel>
                <StackPanel>
                	<TextBlock Height="Auto" Margin="2,2,2,2" Width="Auto" FontSize="10" Foreground="#FFFFFFFF" Text="Copy Hex:" TextWrapping="Wrap"/>
                	<ColourPicker:ClickTextBox x:Name="CopyHexText" Text="#FFFFFFFF" Foreground="#FFFFFFFF" Height="Auto" Width="75" Background="#FF333333" SelectionBackground="#FF377887" Margin="2,2,2,2" FontSize="10" HorizontalAlignment="Left"/>
                </StackPanel>
            </StackPanel>
            <Grid Grid.RowSpan="1" Grid.ColumnSpan="1" Margin="0,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.85*" MinHeight="100"/>
                    <RowDefinition Height="0.15*" MaxHeight="60" MinHeight="10"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.85*" MinWidth="100"/>
                    <ColumnDefinition Width="0.15*" MaxWidth="60" MinWidth="20"/>
                </Grid.ColumnDefinitions>
                <Canvas HorizontalAlignment="Stretch" x:Name="BackgroundCanvas" Margin="1,1,1,1" VerticalAlignment="Stretch" Background="#FFFF0000" Grid.ColumnSpan="1" Grid.RowSpan="1" Grid.Column="0"/>
                <Canvas Margin="1,1,1,1">
                    <Canvas.Background>
                        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                            <GradientStop Color="#00FFFFFF" Offset="1"/>
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                        </LinearGradientBrush>
                    </Canvas.Background>
                </Canvas>
                <Canvas x:Name="ColorCanvas" MouseLeftButtonUp="Canvas_MouseLeftButtonUp" MouseLeftButtonDown="Canvas_MouseLeftButtonDown"     MouseMove="Canvas_MouseMove"     MouseLeave="Canvas_MouseLeave" SizeChanged="ColorCanvas_SizeChanged" Margin="1,1,1,1">
                    <Canvas.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF000000" Offset="1"/>
                            <GradientStop Color="#00000000" Offset="0"/>
                        </LinearGradientBrush>
                    </Canvas.Background>
                    <Grid x:Name="FinalColor" Height="12" Width="12"  Canvas.Left="-6" Canvas.Top="-6">
                        <Ellipse Stroke="#FFFFFFFF" StrokeThickness="3"/>
                        <Ellipse Stroke="#FF000000" Margin="1,1,1,1"/>
                    </Grid>
                </Canvas>
                <Border Height="Auto" HorizontalAlignment="Stretch" Margin="2,2,2,2" x:Name="resultCanvas" VerticalAlignment="Stretch" Grid.ColumnSpan="2" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6" Grid.Row="1" Background="#FFFFFFFF"/>
                <Border Margin="1,1,1,1" Grid.Column="1" BorderBrush="#FF262626" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6" x:Name="RainbowBorder" MouseLeftButtonDown="RainbowBorder_TurnOn" MouseLeftButtonUp="RainbowBorder_TurnOff" MouseMove="RainbowBorder_UpdateHue">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFFF0000"/>
                            <GradientStop Color="#FFFFFF00" Offset="0.16666"/>
                            <GradientStop Color="#FF00FF00" Offset="0.33332"/>
                            <GradientStop Color="#FF00FFFF" Offset="0.5"/>
                            <GradientStop Color="#FF0000FF" Offset="0.66666"/>
                            <GradientStop Color="#FEFF00FF" Offset="0.83333"/>
                            <GradientStop Color="#FFFF0000" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Canvas x:Name="HueCanvas" SizeChanged="HueCanvas_SizeChanged">
                        <Grid Margin="0,0,0,0" x:Name="RainbowHandle" Height="10" Background="#00FFFFFF" HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.33*"/>
                                <ColumnDefinition Width="0.33*"/>
                                <ColumnDefinition Width="0.33*"/>
                            </Grid.ColumnDefinitions>
                            <Path HorizontalAlignment="Stretch" Margin="1,2,0,2" VerticalAlignment="Stretch" Fill="#FF000000" Stretch="Fill" Stroke="#FF000000" Data="M0,0 L13,5.5 L0,10 z" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeDashCap="Round" StrokeLineJoin="Round"/>
                            <Path HorizontalAlignment="Stretch" Margin="0,2,1,2" VerticalAlignment="Stretch" Grid.Column="2" Fill="#FF000000" Stretch="Fill" Stroke="#FF000000" Data="M40,0 L25,5 L40,10 z" StrokeDashCap="Round" StrokeLineJoin="Round"/>
                            <Border Grid.ColumnSpan="3" BorderThickness="1,1,1,1" CornerRadius="3,3,3,3" BorderBrush="#FF000000"/>
                        </Grid>
                    </Canvas>
                </Border>
            </Grid>
            <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Width="Auto" Orientation="Vertical" x:Name="CompactPanel" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="1" Visibility="Collapsed">
                <ColourPicker:ClickTextBox x:Name="CompactRGBText" Text="255,255,255" Foreground="#FFFFFFFF" Height="Auto" SelectionBackground="#FF377887" Background="#FF333333" Width="Auto" Margin="2,2,2,2"/>
                <ColourPicker:ClickTextBox x:Name="CompactHexText" Foreground="#FFFFFFFF" Height="Auto" SelectionBackground="#FF377887" Background="#FF333333" Width="Auto" Margin="2,2,2,2"/>
            </StackPanel>
            <Button HorizontalAlignment="Center" VerticalAlignment="Top" Content="Close Colour Picker" Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource StandardButton}" Margin="3,3,3,3" x:Name="UpdateColourButton"/>
        </Grid>
    </Border>
</UserControl>
